<template>
  <div>
    <!-- 顶部状态栏 -->
    <div class="top-status-bar">
      <!-- 时间显示 -->
      <span class="time" style="float: left">{{time}}</span>
      <!-- 电量图标 -->
      <img
          src="@/assets/电 90%.png"
          style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;"
      />
      <!-- 网络图标 -->
      <img
          src="@/assets/280-手机网络.png"
          style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;"
      />
      <!-- 信号图标 -->
      <img
          src="@/assets/手机信号.png"
          style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;"
      />
    </div>
    <!-- 导航栏，点击事件绑定 toFan 方法 -->
    <van-nav-bar
        title="热力图"
        left-text="返回"
        left-arrow
        style="margin-top: 44px"
        @click-left="toFan"
    />
    <!-- 地图容器 -->
    <div id="container"></div>
    <div class="input-card" style="width: auto;">
      <img src="@/assets/漫游无留白.png" alt="" style="width: 50px; height: 50px;float: left; margin-top: 20px;">
      <div id="loction">
        <el-descriptions title="地址信息" border>
          <el-descriptions-item label="lng" :span="2">{{lng}}</el-descriptions-item>
          <el-descriptions-item label="lat" :span="2">{{lat}}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ addersTextInfo }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js">
</script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script>
import Vue from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {Tab, Tabs} from "vant";
import {showHeatMap} from "@/components/api/news/news";
// 使用 vant 的 Tab 和 Tabs 组件
Vue.use(Tab);
Vue.use(Tabs);
// 之前的引入方式可能由于加载顺序不当，导致在尝试获取 heatmapData 时，脚本还未完全加载和执行。而通过动态创建
// <script> 标签并监听 onload 事件的方式，可以确保在脚本加载完成后再去获取 heatmapData 的值，从而避免了因加载顺序导致的问题。
const script = document.createElement('script');
script.src = 'https://a.amap.com/jsapi_demos/static/resource/heatmapData.js';
document.head.appendChild(script);
script.onload = function() {
  console.log(heatmapData);
};
// 导出组件选项
export default {
  name: "map-view",
  // 组件挂载后初始化高德地图
  mounted() {
    this.initAMap();
  },
  // 组件卸载前销毁地图实例
  unmounted() {
    if (this.map) {
      this.map.destroy();
    }
  },
  // 组件的数据状态
  data() {
    return {
      map: null, // 地图实例
      activeName: "a", // 激活项名称
      active: "a", // 激活项
      time: "", // 当前时间
      // 模拟订单数据，包含经纬度和数量
      heatmapData:[],
      lng:'',
      lat:'',
      addersTextInfo:''
    };
  },
  // 组件的方法
  methods: {
    // 初始化高德地图
    initAMap() {
      // 配置高德地图安全码
      window._AMapSecurityConfig = {
        securityJsCode: this.$cod,
      };
      // 加载高德地图 JS API
      AMapLoader.load({
        key: this.$key, // 高德地图 API 密钥
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.HeatMap", "AMap.Geolocation"], // 需要加载的插件
      })
          .then((AMap) => {
            // 创建地图实例
            var map = new AMap.Map("container", {
              resizeEnable: true,
              center: [116.418261, 39.921984],
              zoom: 11
            });
            if (!isSupportCanvas()) {
              alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
            }
            // 初始化定位对象
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认：true
              timeout: 10000, // 超过10秒后停止定位，默认：无穷大
              maximumAge: 0, // 定位结果缓存0毫秒，默认：0
              convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true, // 显示定位按钮，默认：true
              buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
              buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            var heatmap;
            map.plugin(["AMap.HeatMap"], function () {
              //初始化heatmap对象
              heatmap = new AMap.HeatMap(map, {
                radius: 25, //给定半径
                opacity: [0, 0.8],
                visible:true,
                // gradient:{
                //     0.5: 'red',
                //     0.65: 'rgb(188, 64, 58)',
                //     0.7: 'rgb(0, 255, 0)',
                //     0.9: '#ffea00',
                //     1.0: 'red'
                // }
              });
              //设置数据集：该数据为北京部分“公园”数据
              heatmap.setDataSet({
                data: heatmapData,
                max: 100
              });
              console.log(heatmapData);
            });
            //判断浏览区是否支持canvas
            function isSupportCanvas() {
              var elem = document.createElement('canvas');
              return !!(elem.getContext && elem.getContext('2d'));
            }
          })
          .catch((e) => {
            console.log(e);
          });
    },
    // 返回上一页的方法
    toFan() {
      this.$router.back(-1);
    },
    // 更新时间的方法
    updateTime() {
      // 每秒更新一次时间
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 设置信号状态的方法
    setSignalStatus() {
      const signalStatus = "full";
      // 根据信号状态设置样式
      if (signalStatus === "full") {
        // 设置信号满格的样式
      } else if (signalStatus === "medium") {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
  },
  // 组件创建时初始化时间、信号状态和地图
  created() {
    this.updateTime();
    this.setSignalStatus();
    this.initAMap();
  },
};
</script>
<!-- 样式部分 -->
<style scoped>
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.top-status-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
}
.OrderList44 button {
  width: 100px;
  height: 30px;
  margin-left: 118px;
  border-radius: 20px;
  border: 1px solid #767676;
}
#container {
  width: 430.4px;
  height: 700px;
  padding: 0;
  margin: 0;
}
#loction{top:796px;left:50px;width:500px;position:fixed;z-index:9;}
</style>
